<template>
  <div class="page">
    <div class="local-ver">{{ localVer }}</div>
    <div class="interactive-info">
      <div class="function-tip">
        <div class="function-tip-title">{{ current['label'] || '' }}</div>
        <div class="function-tip-detail">{{ current['tip'] || '' }}</div>
      </div>
      <div class="actions">
        <template v-if="current['actions'] && current['actions'].length > 0">
          <el-button plain @click="actionList[item.action]()" v-for="item in current['actions']" slot="append" :icon="item.icon" :key="item.action">{{
            item.label
          }}</el-button>
        </template>
      </div>
    </div>
    <div class="span" />
    <div class="function">
      <div class="func-col" v-for="col in 10" :key="col">
        <div class="func-row" v-for="row in 2" :key="row">
          <div @click="selected(getInx(col, row))" class="function-item" v-if="getItem(col, row, 'icon') != ''">
            <div class="function-icon-bg">
              <i :class="getItem(col, row, 'icon') + ' function-icon'"></i>
            </div>
            <div class="function-title" :style="currentInx == getInx(col, row) ? 'background:#EEE' : ''">
              <div class="function-title-text">{{ getItem(col, row, 'label') }}</div>
              <div v-if="currentInx == getInx(col, row)" style="margin: 4px 0 0 0; height: 2px; background: #5fb878; width: 100%" />
            </div>
          </div>
        </div>
        <div style="flex: 1; min-height: 1px; width: 100%; background: #fff" />
      </div>
    </div>
  </div>
</template>
<script>
async function SWAPI(action, params = {}) {
  console.log('###############1', action, params)
  return await chrome.runtime.sendMessage({ action, params })
}
const dayjs = require('dayjs')
import G from './gauth.js'
import { functionLis } from './functionLis.js'

export default {
  name: 'home',
  data() {
    return {
      localVer: '',
      currentInx: 0,
      enterStr: '',
      func: null,
      functionLis,
      actionList: {
        // callCustomScript: async () => {
        //   const currentTab = await chrome.tabs.query({ active: true, currentWindow: true })
        //   const { id, url } = currentTab[0]
        //   console.log('autoScript', autoScript)
        //   await SWAPI('sendToTab', { id, params: { action: 'customScript', params: { autoScript } } })
        // },
        hidePopup: async () => {
          const currentTab = await chrome.tabs.query({ active: true, currentWindow: true })
          const { id, url } = currentTab[0]
          await SWAPI('sendToTab', { id, params: { action: 'hidePopup', params: { url } } })
        },
        addline: async () => {
          const currentTab = await chrome.tabs.query({ active: true, currentWindow: true })
          await SWAPI('sendToTab', { id: currentTab[0].id, params: { action: 'addAllLine', params: {} } })
        },
        removeline: async () => {
          const currentTab = await chrome.tabs.query({ active: true, currentWindow: true })
          await SWAPI('sendToTab', { id: currentTab[0].id, params: { action: 'removeAllLine', params: {} } })
        },
        openPageOnTab: async () => {
          await SWAPI('navTo', { url: './functionPageOnTab.html' })
        },
        getbaseurl: async () => {
          let res = await SWAPI('getBaseUrl')
          this.enterStr = res
          // SWAPI('showPop', { title: '接口根地址', msg: res })
        },
        setbaseurl: async () => {
          // await chrome.storage.local.remove(['baseUrl'])
          await SWAPI('setBaseUrl', { baseUrl: this.enterStr })
          // SWAPI('showPop', { title: '接口根地址', msg: '已保存' })
        },
        autoPwd: () => {
          this.$router.push({ path: '/autoPwdManage' })
        },
        googleAuth: () => {
          this.$router.push({ path: '/googleAuth' })
        },
        bookMark: () => {
          this.$router.push({ path: '/bookMark' })
        },
      },
    }
  },
  computed: {
    current() {
      return this.functionLis[this.currentInx]
    },
  },
  created() {
    this.func = autoScript
  },
  mounted() {
    this.getLocalBookmarkVer()
    // let code = keyUtilities.generate('2CTBAHHLKJGAORQT')
    console.log('## code:###')
  },
  methods: {
    async getLocalBookmarkVer() {
      let res = await SWAPI('getLocalBookmarkVer')
      // console.log('getLocalBookmarkVer', res)
      this.enterStr = res.bookMarkVer
      let dateStr = dayjs(parseInt(this.enterStr)).add(8, 'hour').format('YYYY-MM-DD HH:mm:ss')
      this.localVer = `收藏夹最后同步时间：${dateStr} `

      // SWAPI('showPop', { title: '本地版本号', msg: res.bookMarkVer })
    },
    getInx(col, row) {
      return ((col - 1) % 10) + (row - 1) * 10
    },
    getItem(col, row, opt) {
      const inx = ((col - 1) % 10) + (row - 1) * 10
      // console.log(col, row, opt, inx)
      if (!this.functionLis[inx]) return ''
      return this.functionLis[inx][opt] || ''
    },
    selected(inx) {
      this.currentInx = inx
      this.enterStr = ''
      if (this.functionLis[inx]['onclick']) {
        this.actionList[this.functionLis[inx]['onclick']]()
      }
    },
  },
}
</script>
<style>
.page {
  /* background: #BBB; */
  width: 100%;
  /* height: 300px; */
}

.interactive-info {
}

.actions {
  /* background: #555; */
  height: 36px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px #5fb878 solid;
  box-sizing: border-box;
  padding: 4px 0;
}

.action {
  display: flex;
  align-items: center;
  height: 26px;
}

.function-tip {
  /* border: 1px #ddd solid; */
  /* border-radius: 6px; */
  height: 60px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.local-ver {
  width: 100%;
  text-align: center;
  position: fixed;
  right: 0px;
  bottom: 18px;
  color: #aaa;
}
.function-tip-title {
  width: 100%;
  padding: 4px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}
.function-tip-detail {
  color: #777;
  text-align: left;
  padding: 4px;
}
.tip {
  background: #eee;
  padding: 0 8px;
  font-size: 12px;
  color: #666;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  margin: 0 0 0 6px;
  border-radius: 4px;
}
.button {
  width: 120px;
  height: 100%;
}
.span {
  height: 6px;
}

.function {
  display: flex;
  height: 100%;
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}
.func-col {
  box-sizing: border-box;
  width: 10%;
  /* height: 200px; */
  /* background: #bbb; */
  /* border: 1px solid #eee; */
  display: flex;
  flex-direction: column;
}

.function-icon-bg {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: #5fb878;
  border: 1px #5fb878 solid;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.function-title {
  box-sizing: box-sizing;
  width: 28px;
  border: 1px #ddd solid;
  padding: 6px 0;
  display: flex;
  justify-content: center;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.function-title-text {
  width: 12px;
  color: #555;
  font-size: 12px;
}
.function-icon {
  font-size: 14px;
  color: #fff;
}
</style>
